<!DOCTYPE html>
<html>
	<head>
		<title>物流公司列表</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css"> 
		<script src="../../static/vue.min.js"></script>
		<script src="../../static/kj/element-ui/index.js"></script>
		<script src="../../static/jquery.min.js"></script>
		<script src="../../static/kj/layer/layer.js"></script>
		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/router.js"></script>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<div class="c-panel">
				<!-- 检索参数 -->
				<div class="c-title">物流公司列表</div>
				<el-form>
					<div class="c-item">
						<label class="c-label">发货单编号：</label>
						<el-input size="mini" v-model="p.delivery_bn" clearable></el-input>
					</div>
					<div class="c-item">
						<label class="c-label">订单编号：</label>
						<el-input size="mini" v-model="p.order_bn" clearable></el-input>
					</div>
					<div class="c-item">
						<label class="c-label">客户：</label>
						<el-input size="mini" v-model="p.customer_name" placeholder="模糊查询" clearable></el-input>
					</div>
					<div class="c-item" style="min-width: 0px;">
						<el-button size="mini" type="primary" icon="el-icon-search" @click="p.page = 1; f5()">查询</el-button>
					</div>
					<br>
					<div class="c-item">
						<label class="c-label">发货日期：</label>
						<el-date-picker size="mini" v-model="p.start_at" type="date" value-format="yyyy-MM-dd" placeholder="开始日期"></el-date-picker> - 
						<el-date-picker size="mini" v-model="p.end_at" type="date" value-format="yyyy-MM-dd" placeholder="结束日期"></el-date-picker>
					</div>
				</el-form>
				<!-- 快捷按钮 -->
				<div class="fast-btn">
					<el-button size="mini" type="primary" icon="el-icon-plus" @click="add()">新增</el-button>
					<el-button size="mini" type="success" icon="el-icon-view" @click="getBySelect()">查看</el-button>
					<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteByIds()">删除</el-button>
					<el-button size="mini" type="warning" icon="el-icon-download" @click="sa.exportExcel()">导出</el-button>
					<el-button size="mini" type="info"  icon="el-icon-refresh"  @click="sa.f5()">重置</el-button>
				</div>
				<!-- 数据列表 -->
				<el-table class="data-table" ref="data-table" :data="dataList" size="small">
					<el-table-column type="selection" width="45px"></el-table-column>
					<el-table-column label="ID" prop="delivery_id" width="80px" > </el-table-column>
					<el-table-column label="发货单编号" prop="delivery_bn" width="80px" > </el-table-column>
					<el-table-column label="客户" prop="customer_name"> </el-table-column>
					<el-table-column label="订单编号" prop="order_bn"> </el-table-column>
					<el-table-column label="下单数量" prop="qty_ordered"> </el-table-column>
					<el-table-column label="发货数量" prop="total_qty"> </el-table-column>
					<el-table-column label="物流单号" prop="express_bn"> </el-table-column>
					<el-table-column label="物流公司" prop="company_name"> </el-table-column>
					<el-table-column label="收货人" prop="consignee"> </el-table-column>
					<el-table-column label="联系人" prop="mobile"> </el-table-column>
					<el-table-column label="收货地址" prop="full_address"> </el-table-column>
					<el-table-column label="备注" prop="remark"> </el-table-column>
					<el-table-column label="发货时间" prop="created_at"> </el-table-column>
					<el-table-column label="操作" width="220px" fixed="right">
						<template slot-scope="s">
							<el-button v-if="s.row.actions.filter(function (e) { return e == 'view'; }).length != 0"type="text" size="mini" @click="view(s.row)">详情</el-button>
							<el-button v-if="s.row.actions.filter(function (e) { return e == 'express'; }).length != 0" type="text" size="mini" @click="express(s.row)">查看物流</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<div class="page-box">
					<el-pagination background
						layout="total, prev, pager, next, sizes, jumper" 
						:current-page.sync="p.page" 
						:page-size.sync="p.page_size" 
						:total="total" 
						:page-sizes="[1, 10, 20, 30, 40, 50, 100]" 
						@current-change="f5(true)" 
						@size-change="f5(true)">
					</el-pagination>
				</div>
			</div>
		</div>
		<script src="data-list.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: '.vue-box',
				data: {
					p: {	// 查询参数 
						company_bn: '',
						company_name: '',
						page: 1,
						page_size: 10,
					},
					total: 0,
					dataList: []
				},
				methods: {
					// 数据刷新
					f5: function() {
						sa.ajax(router.getDeliveryList, this.p, function(res){
							this.dataList = res.list; // 数据
							this.total = res.total; // 分页
							sa.f5TableHeight();	// 刷新表格高度
						}.bind(this), {type: 'get'});
					},
					view: function(data) {
						sa_admin.showTab({id:90005, name: "发货单详情", url: "view/delivery/detail.html?id=" + data.delivery_id});
					},
					express: function(data) {

					}
				},
				created: function(){
					this.f5()
					sa.onInputEnter(); // 监听输入框的回车事件，执行查询
				}
			});
		</script>
	</body>
</html>